<template>
  <div class="box-00">
    <div class="boxpp">
      <el-card class="box-30">
        <div class="picker">
          <el-date-picker
            v-model="date"
            type="date"
            @change="getData"
          ></el-date-picker>
        </div>
        <div id="chart" style="width: 1200px; height: 380px"></div>
      </el-card>
      <el-card class="box-50">
        <div id="chart1" style="width: 900px; height: 400px"></div>
      </el-card>
      <el-card class="box-60">
        <div id="chart2" style="width: 400px; height: 400px"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      date: new Date("2023-03-16"),
      chart: null,
      chartData: null,
      chart1: [],
      chart2: [],
    };
  },
  mounted() {
    this.getData(), this.drawChart1();
    this.drawChart2();
  },
  methods: {
    getData() {
      try {
        const date = this.date;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const dateStr = `${year}-${month}-${day}`;
        this.$http.get("/schedule/v1/date/" + dateStr).then((response) => {
          this.chartData = response.data;
          console.log(this.chartData);
          this.drawChart();
        });
      } catch (error) {
        console.error(error);
      }
    },
    drawChart() {
      console.log(this.chartData);
      const chart = echarts.init(document.getElementById("chart"));
      const legendData = ["上午场", "下午场", "加映场", "黄金场"];
      const xAxisData = this.chartData.map((item) => item.filmName);
      const seriesData = [
        {
          name: "上午场",
          type: "bar",
          stack: "stack",
          data: this.chartData.map((item) => item.amSession),
        },
        {
          name: "下午场",
          type: "bar",
          stack: "stack",
          data: this.chartData.map((item) => item.pmSession),
        },
        {
          name: "黄金场",
          type: "bar",
          stack: "stack",
          data: this.chartData.map((item) => item.goldSession),
        },
        {
          name: "加映场",
          type: "bar",
          stack: "stack",
          data: this.chartData.map((item) => item.addSession),
        },
      ];
      const option = {
        title: {
          text: "影片总排片Top10统计",
          left: "left",
          textStyle: {
            color: "#333",
          },
        },
        legend: {
          data: legendData,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: xAxisData,
        },
        series: seriesData,
      };
      chart.setOption(option);
    },
    drawChart1() {
      console.log(this.chartData);
      const chart1 = echarts.init(document.getElementById("chart1")); // 初始化 echarts 实例
      this.$http.get("/schedule/v1/sumSession").then((response) => {
        // 通过接口获取数据
        const data = response.data;
        const top20Data = data
          .sort((a, b) => b.totalSession - a.totalSession)
          .slice(0, 20);
        console.log(top20Data);
        console.log(data);
        const option = {
          title: {
            text: "影片排片统计",
            left: "center",
            top: 20,
            textStyle: {
              color: "#333",
            },
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "票房",
              type: "pie",
              radius: "50%",
              center: ['55%', '55%'],

              data: top20Data.map((item) => ({
                name: item.filmName,
                value: item.sumSession,
              })),
              labelLine: {
                show: true,
                length: 30, // 引导线长度
                length2: 50, // 引导线第二段长度
                smooth: true, // 引导线是否平滑
                lineStyle: {
                  color: "#aaa", // 引导线颜色
                },
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        chart1.setOption(option); // 绘制饼图
      });
      this.chart1 = chart1; // 将 echarts 实例赋值给 chart1 属性
    },
    drawChart2() {
      const chart2 = echarts.init(document.getElementById("chart2")); // 初始化 echarts 实例
      this.$http.get("/schedule/v1/typeSession").then((response) => {
        // 通过接口获取数据
        const data = response.data;
        console.log(data);
        const option = {
          grid:{
            left:'50%'
          },
          title: {
            text: "影片排片类型统计",
            left: "center",
            top: 20,
            textStyle: {
              color: "#333",
            },
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "票房",
              type: "pie",
              radius: ["60%", "20%"],
              center: ['65%', '55%'],

              data: data.map((item) => ({
                name: item.type,
                value: item.sumSession,
              })),
              labelLine: {
                show: true,
                length: 80, // 引导线长度
                length2: 30, // 引导线第二段长度
                smooth: true, // 引导线是否平滑
                lineStyle: {
                  color: "#aaa", // 引导线颜色
                },
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        chart2.setOption(option); // 绘制饼图
      });
      this.chart2 = chart2; // 将 echarts 实例赋值给 chart1 属性
    },
  },
};
</script>

<style>
.picker {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
}
.box-00 {
  width: 100%;
  background-color: rgb(241, 241, 241);
  overflow: auto;
}
.boxpp {
  width: 710px;
  margin-left: 16px;
  margin-top: 10px;
}
.box-30 {
  width: 1280px;
  height: 440px;
}
.box-50 {
  margin-top: 10px;
  width: 750px;
  height: 400px;
}
.box-60 {
  height: 400px;
  width: 520px;
  margin-left: 760px;
  margin-top: -400px;
}
</style>